<template>
  <div class="pb-60">
    <div class="text-center pt-10">和蔼小区</div>

    <!-- 轮播图 -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      indicator-color="rgba(255,255,255, 0.5)"
      indicator-active-color="#fff"
      :circular="true"
      :interval="3000"
      :duration="500"
      class="mt-20 mb-10"
    >
      <swiper-item
        v-for="(item, index) in images"
        :key="index"
        class="text-center swiper-items"
      >
        <image
          :src="item"
          style="width: 100%; height: 100%"
          mode="aspectFill"
        ></image>
      </swiper-item>
    </swiper>

    <!-- 按钮 -->
    <div class="p-20 mt-20 mb-20">
      <canuse-button
        style="border-radius: 50%;"
        class="mr-20 p-20"
        @click="toVote"
        >社区投票</canuse-button
      >
      <canuse-button style="border-radius: 50%;" class="p-20" @click="putTask"
        >发布任务</canuse-button
      >
    </div>

    <!-- 社区任务列表 -->
    <canuse-tab
      v-model="active"
      :list="list"
      border
      class="canuse-tabs__wrap canuse-tabs__navs mt-20"
    >
      <!-- 列表 -->
      <div
        class="pt-20 pb-20 text-center border-bottom"
        @click="tovoteDetail(item)"
        v-for="(item, index) in datas"
        :key="index"
      >
        {{ item.name }}
      </div>
    </canuse-tab>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: ["/static/swipe.png", "/static/swipe.png"],
      list: ["社区任务列表"],
      active: 0,
      datas: [
        { name: "写对联任务" },
        { name: "出演T台" },
        { name: "寻人启事" },
      ],
    };
  },

  methods: {
    // 社区投票活动列表
    toVote() {
      uni.navigateTo({
        url: `/pages/page/vote`,
      });
    },

    // 发布任务
    putTask() {
      uni.navigateTo({
        url: `/pages/page/putTask`,
      });
    },

    // 点击社区任务列表
    tovoteDetail(item) {
      uni.navigateTo({
        url: `/pages/page/voteDetail`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.canuse-tabs__wrap /deep/ .canuse-tab.active[data-v-16c34e12]::after {
  background-color: #479995;
}
</style>
